|
Jupyter at Bryn Mawr College |
|
|
| Public notebooks: /services/public/dblank / CS110 Intro to Computing / 2017-Spring / Notes | |||
Vertexes, Shapes, and Rotation¶
First, let's look at a new way of drawing shapes:
beginShape();
vertex(X, Y);
...
endShape();
In [94]:
%%processing
fill(255, 0, 128);
beginShape();
vertex(10, 10);
vertex(70, 10);
vertex(80, 80);
vertex(40, 80);
vertex(5, 50);
vertex(10, 10);
endShape();
Let's use what we know about making functions to put that code into a function, so that we can call it whenever we want:
In [95]:
%%processing
void drawShape() {
fill(255, 0, 128);
beginShape();
vertex(10, 10);
vertex(70, 10);
vertex(80, 80);
vertex(40, 80);
vertex(5, 50);
vertex(10, 10);
endShape();
}
void draw() {
drawShape();
}
However, that only allows drawing it in one place. Let's add parameters so that we can draw it wherever we want:
In [96]:
%%processing
void drawShape(float x, float y) {
fill(255, 0, 128);
beginShape();
vertex(10 + x, 10 + y);
vertex(70 + x, 10 + y);
vertex(80 + x, 80 + y);
vertex(40 + x, 80 + y);
vertex(5 + x, 50 + y);
vertex(10 + x, 10 + y);
endShape();
}
void draw() {
drawShape(0, 0);
drawShape(50, 50);
}
Cool! But 0,0 isn't a good way of describing the position of that shape. Let's subtract the center point from each x,y so that it reflects better its center:
In [97]:
%%processing
void drawShape(float x, float y) {
fill(255, 0, 128);
beginShape();
vertex(10 + x - 50, 10 + y - 50);
vertex(70 + x - 50, 10 + y - 50);
vertex(80 + x - 50, 80 + y - 50);
vertex(40 + x - 50, 80 + y - 50);
vertex(5 + x - 50, 50 + y - 50);
vertex(10 + x - 50, 10 + y - 50);
endShape();
}
void draw() {
drawShape(0, 0);
drawShape(50, 50);
}
As we saw with the last lab, we can rotate a point around another point by using sin and cos. So, we could do that for every point in our shape to rotate it.
We could do that for each point
In [99]:
%%processing
float rotateAroundX(float ox, float oy, float px, float py, float angle) {
float qx = ox + cos(angle) * (px - ox) + sin(angle) * (py - oy);
return qx;
}
float rotateAroundY(float ox, float oy, float px, float py, float angle) {
float qy = oy - sin(angle) * (px - ox) + cos(angle) * (py - oy);
return qy;
}
void drawShape(float x, float y, float angle) {
fill(255, 0, 128);
beginShape();
vertex(rotateAroundX(x, y, 10, 10, angle),
rotateAroundY(x, y, 10, 10, angle));
vertex(rotateAroundX(x, y, 70, 10, angle),
rotateAroundY(x, y, 70, 10, angle));
vertex(rotateAroundX(x, y, 80, 80, angle),
rotateAroundY(x, y, 80, 80, angle));
vertex(rotateAroundX(x, y, 40, 80, angle),
rotateAroundY(x, y, 40, 80, angle));
vertex(rotateAroundX(x, y, 5, 50, angle),
rotateAroundY(x, y, 5, 50, angle));
vertex(rotateAroundX(x, y, 10, 10, angle),
rotateAroundY(x, y, 10, 10, angle));
endShape();
}
float angle;
void setup() {
angle = 0.0;
background(128);
}
void draw() {
drawShape(50, 50, angle); // 45 degrees
angle += .1;
}
In [108]:
//%%processing
void drawShape(float x, float y, float angle) {
fill(255, 0, 128);
pushMatrix();
translate(x, y);
rotate(angle);
beginShape();
/*
vertex(10 - 50, 10 - 50);
vertex(70 - 50, 10 - 50);
vertex(80 - 50, 80 - 50);
vertex(40 - 50, 80 - 50);
vertex(5 - 50, 50 - 50);
vertex(10 - 50, 10 - 50);
*/
vertex(10 - 30, 10 - 40);
vertex(70 - 30, 10 - 40);
vertex(80 - 30, 80 - 40);
vertex(40 - 30, 80 - 40);
vertex(5 - 30, 50 - 40);
vertex(10 - 30, 10 - 40);
endShape();
popMatrix();
}
float angle = 0.0;
void setup() {
size(500, 500);
}
void draw() {
background(0);
drawShape(250, 250, angle);
angle += .1;
}
In [110]:
void setup() {
size(500, 500);
fill(0);
ellipse(width/2, height/2, 5, 5);
println("----------------------------------");
}
float last_x = 0;
float last_y = 0;
void mouseDragged() {
if (mouseX != last_x && mouseY != last_y) {
println(" vertex(" + int(mouseX - width/2) + " + x, "
+ int(mouseY - height/2) + " + y);");
rect(mouseX, mouseY, 5, 5);
last_x = mouseX;
last_y = mouseY;
}
}
In [119]:
void drawThing(float x1, float y1, float angle) {
pushMatrix();
translate(x1, y1);
rotate(angle);
beginShape();
int x = 0;
int y = 0;
vertex(-49 + x, -65 + y);
vertex(-48 + x, -63 + y);
vertex(-46 + x, -62 + y);
vertex(-43 + x, -59 + y);
vertex(-40 + x, -58 + y);
vertex(-39 + x, -57 + y);
vertex(-38 + x, -55 + y);
vertex(-35 + x, -54 + y);
vertex(-34 + x, -53 + y);
vertex(-29 + x, -52 + y);
vertex(-23 + x, -50 + y);
vertex(24 + x, -52 + y);
vertex(31 + x, -53 + y);
vertex(40 + x, -54 + y);
vertex(41 + x, -55 + y);
vertex(44 + x, -58 + y);
vertex(45 + x, -59 + y);
vertex(49 + x, -60 + y);
vertex(50 + x, -62 + y);
vertex(51 + x, -64 + y);
vertex(52 + x, -65 + y);
vertex(54 + x, -67 + y);
vertex(56 + x, -68 + y);
vertex(57 + x, -69 + y);
vertex(59 + x, -70 + y);
vertex(61 + x, -72 + y);
vertex(62 + x, -73 + y);
vertex(64 + x, -75 + y);
vertex(65 + x, -77 + y);
vertex(67 + x, -78 + y);
vertex(72 + x, -77 + y);
vertex(74 + x, -74 + y);
vertex(75 + x, -73 + y);
vertex(76 + x, -70 + y);
vertex(81 + x, -65 + y);
vertex(82 + x, -64 + y);
vertex(84 + x, -58 + y);
vertex(85 + x, -55 + y);
vertex(86 + x, -54 + y);
vertex(90 + x, -48 + y);
vertex(91 + x, -45 + y);
vertex(92 + x, -43 + y);
vertex(94 + x, -42 + y);
vertex(95 + x, -40 + y);
vertex(96 + x, -39 + y);
vertex(95 + x, -37 + y);
vertex(87 + x, -35 + y);
vertex(84 + x, -34 + y);
vertex(77 + x, -33 + y);
vertex(72 + x, -32 + y);
vertex(70 + x, -30 + y);
vertex(67 + x, -29 + y);
vertex(66 + x, -28 + y);
vertex(65 + x, -27 + y);
vertex(57 + x, -28 + y);
vertex(51 + x, -29 + y);
vertex(50 + x, -30 + y);
vertex(49 + x, -32 + y);
vertex(47 + x, -33 + y);
vertex(46 + x, -34 + y);
vertex(45 + x, -35 + y);
vertex(44 + x, -34 + y);
vertex(42 + x, -30 + y);
vertex(41 + x, -29 + y);
vertex(40 + x, -27 + y);
vertex(39 + x, -23 + y);
vertex(37 + x, -20 + y);
vertex(36 + x, -18 + y);
vertex(37 + x, -9 + y);
vertex(39 + x, 2 + y);
vertex(41 + x, 3 + y);
vertex(42 + x, 13 + y);
vertex(44 + x, 27 + y);
vertex(45 + x, 40 + y);
vertex(44 + x, 57 + y);
vertex(31 + x, 56 + y);
vertex(-4 + x, 55 + y);
vertex(-33 + x, 56 + y);
vertex(-36 + x, 55 + y);
vertex(-38 + x, 51 + y);
vertex(-36 + x, 47 + y);
vertex(-35 + x, 41 + y);
vertex(-34 + x, 21 + y);
vertex(-33 + x, 17 + y);
vertex(-34 + x, 0 + y);
vertex(-35 + x, -24 + y);
vertex(-36 + x, -30 + y);
vertex(-38 + x, -34 + y);
vertex(-39 + x, -35 + y);
vertex(-41 + x, -32 + y);
vertex(-43 + x, -30 + y);
vertex(-44 + x, -28 + y);
vertex(-45 + x, -25 + y);
vertex(-46 + x, -24 + y);
vertex(-48 + x, -23 + y);
vertex(-51 + x, -19 + y);
vertex(-56 + x, -20 + y);
vertex(-59 + x, -22 + y);
vertex(-60 + x, -23 + y);
vertex(-74 + x, -24 + y);
vertex(-75 + x, -25 + y);
vertex(-78 + x, -27 + y);
vertex(-79 + x, -28 + y);
vertex(-78 + x, -35 + y);
vertex(-77 + x, -37 + y);
vertex(-75 + x, -39 + y);
vertex(-70 + x, -43 + y);
vertex(-69 + x, -44 + y);
vertex(-68 + x, -45 + y);
vertex(-67 + x, -48 + y);
vertex(-60 + x, -55 + y);
vertex(-58 + x, -58 + y);
vertex(-55 + x, -59 + y);
vertex(-52 + x, -64 + y);
vertex(-49 + x, -65 + y);
vertex(-48 + x, -68 + y);
endShape();
popMatrix();
}
void setup() {
size(500, 500);
}
void draw() {
fill(128, 34, 200);
drawThing(250, 250, PI/4);
fill(22, 88, 200);
drawThing(100, 100, PI/2);
fill(56, 100, 100);
drawThing(300, 300, PI);
}
In [136]:
//%%processing
float angle1 = 0;
void drawPerson(float x1, float y1, float angle) {
pushMatrix();
translate(x1, y1);
rotate(angle);
scale(.5);
fill(128, 0, 56);
beginShape();
float x = 0;
float y = 0;
vertex(-30 + x, -38.111092331968166 + y);
vertex(-29 + x, -35.111092331968166 + y);
vertex(-28 + x, -32.111092331968166 + y);
vertex(-26 + x, -31.111092331968166 + y);
vertex(-25 + x, -30.111092331968166 + y);
vertex(-23 + x, -29.111092331968166 + y);
vertex(-21 + x, -28.111092331968166 + y);
vertex(-19 + x, -27.111092331968166 + y);
vertex(-15 + x, -26.111092331968166 + y);
vertex(-11 + x, -25.111092331968166 + y);
vertex(-9 + x, -23.111092331968166 + y);
vertex(-3 + x, -22.111092331968166 + y);
vertex(-1 + x, -21.111092331968166 + y);
vertex(8 + x, -22.111092331968166 + y);
vertex(11 + x, -23.111092331968166 + y);
vertex(12 + x, -25.111092331968166 + y);
vertex(18 + x, -26.111092331968166 + y);
vertex(20 + x, -27.111092331968166 + y);
vertex(22 + x, -28.111092331968166 + y);
vertex(25 + x, -30.111092331968166 + y);
vertex(26 + x, -31.111092331968166 + y);
vertex(27 + x, -32.111092331968166 + y);
vertex(29 + x, -33.111092331968166 + y);
vertex(30 + x, -35.111092331968166 + y);
vertex(31 + x, -38.111092331968166 + y);
vertex(32 + x, -39.111092331968166 + y);
vertex(34 + x, -40.111092331968166 + y);
vertex(35 + x, -39.111092331968166 + y);
vertex(58 + x, -38.111092331968166 + y);
vertex(59 + x, -37.111092331968166 + y);
vertex(65 + x, -36.111092331968166 + y);
vertex(68 + x, -35.111092331968166 + y);
vertex(70 + x, -33.111092331968166 + y);
vertex(72 + x, -32.111092331968166 + y);
vertex(74 + x, -30.111092331968166 + y);
vertex(77 + x, -29.111092331968166 + y);
vertex(78 + x, -28.111092331968166 + y);
vertex(80 + x, -26.111092331968166 + y);
vertex(82 + x, -25.111092331968166 + y);
vertex(84 + x, -23.111092331968166 + y);
vertex(86 + x, -22.111092331968166 + y);
vertex(87 + x, -21.111092331968166 + y);
vertex(88 + x, -20.111092331968166 + y);
vertex(89 + x, -19.111092331968166 + y);
vertex(91 + x, -18.111092331968166 + y);
vertex(94 + x, -17.111092331968166 + y);
vertex(96 + x, -15.111092331968166 + y);
vertex(97 + x, -12.111092331968166 + y);
vertex(98 + x, -11.111092331968166 + y);
vertex(100 + x, -10.111092331968166 + y);
vertex(101 + x, -9.111092331968166 + y);
vertex(98 + x, -8.111092331968166 + y);
vertex(97 + x, -7.111092331968166 + y);
vertex(96 + x, -6.111092331968166 + y);
vertex(94 + x, -5.111092331968166 + y);
vertex(91 + x, -3.111092331968166 + y);
vertex(89 + x, -2.111092331968166 + y);
vertex(88 + x, -1.111092331968166 + y);
vertex(85 + x, 0.888907668031834 + y);
vertex(82 + x, 2.888907668031834 + y);
vertex(80 + x, 3.888907668031834 + y);
vertex(77 + x, 2.888907668031834 + y);
vertex(75 + x, 1.888907668031834 + y);
vertex(70 + x, 0.888907668031834 + y);
vertex(66 + x, -0.11109233196816604 + y);
vertex(64 + x, -1.111092331968166 + y);
vertex(60 + x, -2.111092331968166 + y);
vertex(58 + x, -3.111092331968166 + y);
vertex(57 + x, -5.111092331968166 + y);
vertex(55 + x, -6.111092331968166 + y);
vertex(54 + x, -7.111092331968166 + y);
vertex(51 + x, -9.111092331968166 + y);
vertex(50 + x, -10.111092331968166 + y);
vertex(49 + x, -3.111092331968166 + y);
vertex(48 + x, -2.111092331968166 + y);
vertex(47 + x, -1.111092331968166 + y);
vertex(46 + x, 0.888907668031834 + y);
vertex(45 + x, 1.888907668031834 + y);
vertex(44 + x, 3.888907668031834 + y);
vertex(42 + x, 8.888907668031834 + y);
vertex(41 + x, 12.888907668031834 + y);
vertex(40 + x, 18.888907668031834 + y);
vertex(39 + x, 22.888907668031834 + y);
vertex(38 + x, 27.888907668031834 + y);
vertex(37 + x, 31.888907668031834 + y);
vertex(36 + x, 36.888907668031834 + y);
vertex(35 + x, 39.888907668031834 + y);
vertex(34 + x, 41.888907668031834 + y);
vertex(32 + x, 40.888907668031834 + y);
vertex(-11 + x, 41.888907668031834 + y);
vertex(-13 + x, 42.888907668031834 + y);
vertex(-15 + x, 41.888907668031834 + y);
vertex(-14 + x, 40.888907668031834 + y);
vertex(-13 + x, 38.888907668031834 + y);
vertex(-14 + x, 20.888907668031834 + y);
vertex(-15 + x, 18.888907668031834 + y);
vertex(-18 + x, 13.888907668031834 + y);
vertex(-19 + x, 10.888907668031834 + y);
vertex(-20 + x, 7.888907668031834 + y);
vertex(-21 + x, 6.888907668031834 + y);
vertex(-22 + x, 4.888907668031834 + y);
vertex(-23 + x, 2.888907668031834 + y);
vertex(-24 + x, 1.888907668031834 + y);
vertex(-25 + x, -0.11109233196816604 + y);
vertex(-26 + x, -2.111092331968166 + y);
vertex(-28 + x, -3.111092331968166 + y);
vertex(-29 + x, -5.111092331968166 + y);
vertex(-30 + x, -6.111092331968166 + y);
vertex(-31 + x, -7.111092331968166 + y);
vertex(-32 + x, -6.111092331968166 + y);
vertex(-33 + x, -3.111092331968166 + y);
vertex(-34 + x, -2.111092331968166 + y);
vertex(-36 + x, -1.111092331968166 + y);
vertex(-38 + x, -0.11109233196816604 + y);
vertex(-39 + x, 0.888907668031834 + y);
vertex(-44 + x, 3.888907668031834 + y);
vertex(-48 + x, 4.888907668031834 + y);
vertex(-51 + x, 7.888907668031834 + y);
vertex(-52 + x, 9.888907668031834 + y);
vertex(-53 + x, 11.888907668031834 + y);
vertex(-55 + x, 12.888907668031834 + y);
vertex(-56 + x, 9.888907668031834 + y);
vertex(-58 + x, 7.888907668031834 + y);
vertex(-59 + x, 4.888907668031834 + y);
vertex(-60 + x, 3.888907668031834 + y);
vertex(-63 + x, 1.888907668031834 + y);
vertex(-65 + x, -0.11109233196816604 + y);
vertex(-68 + x, -2.111092331968166 + y);
vertex(-69 + x, -5.111092331968166 + y);
vertex(-70 + x, -6.111092331968166 + y);
vertex(-72 + x, -7.111092331968166 + y);
vertex(-73 + x, -9.111092331968166 + y);
vertex(-74 + x, -10.111092331968166 + y);
vertex(-75 + x, -11.111092331968166 + y);
vertex(-76 + x, -12.111092331968166 + y);
vertex(-75 + x, -13.111092331968166 + y);
vertex(-74 + x, -17.111092331968166 + y);
vertex(-73 + x, -19.111092331968166 + y);
vertex(-72 + x, -20.111092331968166 + y);
vertex(-71 + x, -22.111092331968166 + y);
vertex(-69 + x, -23.111092331968166 + y);
vertex(-68 + x, -25.111092331968166 + y);
vertex(-65 + x, -27.111092331968166 + y);
vertex(-63 + x, -28.111092331968166 + y);
vertex(-61 + x, -29.111092331968166 + y);
vertex(-59 + x, -32.111092331968166 + y);
vertex(-58 + x, -33.111092331968166 + y);
vertex(-56 + x, -35.111092331968166 + y);
vertex(-55 + x, -37.111092331968166 + y);
vertex(-54 + x, -38.111092331968166 + y);
vertex(-53 + x, -37.111092331968166 + y);
vertex(-48 + x, -38.111092331968166 + y);
vertex(-46 + x, -39.111092331968166 + y);
vertex(-40 + x, -40.111092331968166 + y);
vertex(-31 + x, -39.111092331968166 + y);
vertex(-30 + x, -38.111092331968166 + y);
vertex(-26 + x, -37.111092331968166 + y);
endShape();
fill(0);
beginShape();
// paste pants here!
endShape();
popMatrix();
}
float[] angles = new float[25];
void setup() {
size(500, 500);
angles[0] = .1;
angles[1] = .2;
angles[2] = .3;
angles[3] = .4;
angles[4] = .5;
angles[5] = .6;
angles[6] = .7;
angles[7] = .8;
angles[8] = .9;
angles[9] = 1.0;
angles[10] = 1.1;
angles[11] = 1.2;
angles[12] = 1.2;
angles[13] = 1.2;
angles[14] = 1.3;
angles[15] = 1.4;
angles[16] = 1.5;
angles[17] = 1.6;
angles[18] = 1.7;
angles[19] = 1.8;
angles[20] = 1.9;
angles[21] = 1.9;
angles[22] = 1.10;
angles[23] = 1.11;
angles[24] = 1.12;
}
void draw() {
background(255);
int a = 0;
for (int i=0; i <5; i++) {
for (int j=0; j < 5; j++) {
drawPerson(50 + i * 100, 50 + j * 100, random(3));
angles[a] = angles[a] + .5;
a++;
}
}
angle1 += PI/180 * 20;
//delay(1);
}